<template>
    <el-tooltip>
        <div class="left">
            <slot></slot>
            <template v-for="(obj, idx) in format">
                <p v-if="obj.spliter" class="spliter" :key="'spliter_' + idx" />

                <!-- boolean -->
                <!-- <template v-if="obj.key && (currentValue[obj.key] === true || currentValue[obj.key] === false)"> -->
                <template v-if="isBoolean(obj)">
                    <p-tooltip :key="idx" :content="obj.label">
                        <i
                            :key="'icon_' + idx"
                            class="icon"
                            :class="[obj.icon, currentValue[obj.key] ? 'selected' : '']"
                            @click="handleClickBoolean(obj.key, obj.cbFunc)"
                        />
                    </p-tooltip>
                </template>

                <!-- function -->
                <template v-else-if="isFunction(obj)">
                    <p-tooltip :key="idx" :content="obj.label">
                        <i
                            :key="'icon_' + idx"
                            class="icon"
                            :class="[obj.icon, obj.iconHide ? 'hide' : '']"
                            @click="currentValue[obj.key]()"
                        />
                    </p-tooltip>
                </template>

                <!-- popup -->
                <template v-else>
                    <el-popover :key="'obj_' + idx" placement="top-start" :width="obj.width || '260'" trigger="click">
                        <div v-for="(row, ridx) in obj.list" :key="'row_' + ridx">
                            <h5 class="folder" >{{ row.label }}</h5>
                            <div v-for="(col, cidx) in row.list" :key="'c_' + cidx">
                                <v-floater-panel-item
                                    :key="ridx + '_' + cidx"
                                    :label="col.label"
                                    :keys="getKeys(col.key)"
                                    v-model="currentValue[getKeys(col.key, true)]"
                                    :format="col"
                                    :color="col.color"
                                    :slider="col.slider"
                                    :cbFunc="col.cbFunc"
                                ></v-floater-panel-item>
                            </div>
                        </div>
                        <el-button class="icon" :class="[obj.icon]">
                            <template v-slot:reference></template>
                        </el-button>
                    </el-popover>
                </template>
            </template>
        </div>

        <p class="spliter" :key="'spliter_s'" />

        <div class="right">
            <div class="pointer">
                pos: {{ viewport && viewport.pointer && viewport.pointer.x }} |
                {{ viewport && viewport.pointer && viewport.pointer.y }}
                {{ viewport && viewport.pointer && viewport.pointer.unit }}
            </div>
            <div class="ws">
                space: {{ viewport && viewport.grid && viewport.grid.spacing }}
                {{ viewport && viewport.grid && viewport.grid.spacingUnit }}, {{ $root.ws.serverClock }}ms
            </div>
        </div>
    </el-tooltip>
</template>

<script type="text/ecmascript-6">
import App from '../utils/3D/App.js';
import vFloaterPanel from '../utils/v-floater-panel.vue';
import vFloaterPanelItem from '../utils/v-floater-panel-item.vue';
import PTooltip from './p-tooltip.vue';

/**
 * p-toolbar-map
 */
export default {
    name: 'p-toolbar-map',
    inject: ['reload'],
    components: { PTooltip, vFloaterPanel, vFloaterPanelItem }, //eslint-disable-line
    props: {
        modelValue: Object,
        mapRef: Object,
        format: Array,
    },
    data() {
        return {
            currentValue: this.modelValue,
            viewport: {}
        };
    },
    watch: {
        modelValue: {
            handler(val) {
                this.currentValue = val;
            },
            immediate: true,
            deep: true
        },
        currentValue: {
            handler(val) {
                this.$emit('input', val);
            },
            immediate: true,
            deep: true
        }
    },
    mounted() {
        this.init();
    },
    beforeDestroy() {},
    methods: {
        init() {
            this.app = App.getInstance();
            this.viewport = this.app.viewport;
        },
        isBoolean(obj) {
            if (!obj.key && obj.cbFunc) return true;
            return this.currentValue[obj.key] === true || this.currentValue[obj.key] === false;
        },
        // IS. function add by ouyang on 2020.12.09
        isFunction(obj) {
            // console.error('!!!!!!!!!!!!!!!!', this.currentValue[obj.key], obj.key, typeof obj.key);
            if (typeof this.currentValue[obj.key] === 'function') return true;
        },
        getKeys(key, prefix = false) {
            if (!key) return;
            // return key.split('.')[lv];
            let rtn = '',
                s = key.match(/\.(\S*)/);
            if (!s) rtn = key;
            else if (!prefix) rtn = s[1];
            else rtn = key.replace(s[0], '');
            // console.log('---> ', key, prefix, rtn);
            return rtn;
        },
        handleClickBoolean(key, cbFunc) {
            if (key) this.currentValue[key] = !this.currentValue[key];
            if (typeof cbFunc === 'function') cbFunc(this.currentValue[key]);
        }
    }
};
</script>

<style lang="scss">
.p-toolbar-map {
    position: absolute;
    left: 0;
    bottom: 0;
    // top: 0;
    height: 38px;
    width: 100%;
    color: whitesmoke;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 3px 0 6px #cccccc;
    display: flex;
    align-items: center;

    .left {
        display: flex;
        align-items: center;
        /*flex: 1 1 auto;*/
        flex: 0 0 auto;
        flex-wrap: wrap;
    }
    .right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-width: 150px;
        /*width: 150px;*/
        height: 22px;
        margin: 0 2px 0 0;
        padding: 2px 6px;
        /*border: #f2f2f4 1px solid;*/
        border: #b6b9c2 1px solid;
        border-radius: 3px;
        flex: 0 0 auto;
        /*color: #f2f2f4;*/
        color: #454a60;
        font-size: 10px;
    }

    .icon {
        cursor: pointer;
        width: 26px;
        height: 26px;
        font-size: 20px;
        font-weight: 300;
        margin: -2px 0 0 10px;
        border-radius: 6px;
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #808080;

        &:hover {
            font-size: 22px;
            background: #cccccc;
        }
        &.selected {
            font-size: 22px;
            background: #999999;
            color: #f2f2f4;
        }
    }

    .spliter {
        width: 0px;
        height: 16px;
        background: #ffffff;
        margin: 0 10px;
        border-left: #cccccc 1px solid;
        border-right: #333333 1px solid;
    }
}
.el-popover {
    .folder {
        // margin-left: -5px;
        // background: whitesmoke;
        // margin: 0 0 0 -5px;
        margin: 0;
        padding: 0 0 0 16px;
        font-size: 12px;
        line-height: 36px;
        box-shadow: #ababab 6px 3px 6px;
    }
}
</style>
